{% extends 'bootstarp_ds.html' %}

{% block content %}
<div id="content" style="max-width: 1200px; margin: 0 auto; padding: 20px; background: #f5f5f5;">
  <div class="user-header" style="background: #fff; padding: 15px; margin-bottom: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
    <div style="display: flex; align-items: center;">
      <img src="/static/cag/user.png" style="width: 50px; height: 50px; border-radius: 50%; margin-right: 15px;">
      <div>
        <h2 style="font-size: 18px; color: #333; margin: 0 0 5px 0;">欢迎回来，{{ user.username }}</h2>
        <p style="font-size: 14px; color: #999; margin: 0;">会员等级: 普通会员</p>
      </div>
    </div>
  </div>

  <div class="user-menu" style="background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 15px 0; margin-bottom: 20px;">
    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center;">
      <a href="/user/center/" style="display: block; padding: 10px; color: #333; text-decoration: none;">
        <div style="background: #f40; color: #fff; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; margin: 0 auto 5px;">
          <i class="icon-user"></i>
        </div>
        <span style="font-size: 14px;">个人信息</span>
      </a>
      <a href="/user/order/" style="display: block; padding: 10px; color: #333; text-decoration: none;">
        <div style="background: #f40; color: #fff; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; margin: 0 auto 5px;">
          <i class="icon-order"></i>
        </div>
        <span style="font-size: 14px;">我的订单</span>
      </a>
      <a href="/user/address/" style="display: block; padding: 10px; color: #333; text-decoration: none;">
        <div style="background: #f40; color: #fff; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; margin: 0 auto 5px;">
          <i class="icon-address"></i>
        </div>
        <span style="font-size: 14px;">收货地址</span>
      </a>
      <a href="/user/favorite/" style="display: block; padding: 10px; color: #333; text-decoration: none;">
        <div style="background: #f40; color: #fff; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; margin: 0 auto 5px;">
          <i class="icon-favorite"></i>
        </div>
        <span style="font-size: 14px;">我的收藏</span>
      </a>
    </div>
  </div>

  <div class="user-order-menu" style="background: #fff; border-radius: 4px; padding: 15px; margin-bottom: 20px;">
    <h3 style="font-size: 16px; color: #333; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 1px solid #eee;">我的订单</h3>
    <div style="display: flex; justify-content: space-between; text-align: center;">
      <a href="/user/order/unpaid" style="display: block; color: #333; text-decoration: none;">
        <div style="width: 40px; height: 40px; line-height: 40px; margin: 0 auto 5px;">
          <i class="icon-unpaid"></i>
        </div>
        <span style="font-size: 12px;">待付款</span>
      </a>
      <a href="/user/order/unreceived" style="display: block; color: #333; text-decoration: none;">
        <div style="width: 40px; height: 40px; line-height: 40px; margin: 0 auto 5px;">
          <i class="icon-unreceived"></i>
        </div>
        <span style="font-size: 12px;">待收货</span>
      </a>
      <a href="/user/order/unreviewed" style="display: block; color: #333; text-decoration: none;">
        <div style="width: 40px; height: 40px; line-height: 40px; margin: 0 auto 5px;">
          <i class="icon-unreviewed"></i>
        </div>
        <span style="font-size: 12px;">待评价</span>
      </a>
      <a href="/user/order/aftersale" style="display: block; color: #333; text-decoration: none;">
        <div style="width: 40px; height: 40px; line-height: 40px; margin: 0 auto 5px;">
          <i class="icon-aftersale"></i>
        </div>
        <span style="font-size: 12px;">退换/售后</span>
      </a>
      <a href="/user/order/all" style="display: block; color: #333; text-decoration: none;">
        <div style="width: 40px; height: 40px; line-height: 40px; margin: 0 auto 5px;">
          <i class="icon-all"></i>
        </div>
        <span style="font-size: 12px;">全部订单</span>
      </a>
    </div>
  </div>

  <div class="user-promo" style="background: #fff; border-radius: 4px; padding: 15px; margin-bottom: 20px;">
    <h3 style="font-size: 16px; color: #333; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 1px solid #eee;">我的优惠</h3>
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; text-align: center;">
      <div>
        <p style="font-size: 24px; color: #f40; margin: 0;">0</p>
        <p style="font-size: 12px; color: #999; margin: 5px 0 0 0;">优惠券</p>
      </div>
      <div>
        <p style="font-size: 24px; color: #f40; margin: 0;">0</p>
        <p style="font-size: 12px; color: #999; margin: 5px 0 0 0;">红包</p>
      </div>
      <div>
        <p style="font-size: 24px; color: #f40; margin: 0;">0</p>
        <p style="font-size: 12px; color: #999; margin: 5px 0 0 0;">京豆</p>
      </div>
    </div>
  </div>

<div class="footer-menu" style="position: fixed; bottom: 0; left: 0; right: 0; background: #fff; box-shadow: 0 -1px 3px rgba(0,0,0,0.1); display: flex; justify-content: space-around; padding: 10px 0;">
  <a href="/index/" style="text-align: center; color: #666; text-decoration: none;">
    <img src="/static/cag/home.png" style="width: 24px; height: 24px; display: block; margin: 0 auto 5px;">
    <span style="font-size: 12px;">首页</span>
  </a>
  <a href="/goods/" style="text-align: center; color: #666; text-decoration: none;">
    <img src="/static/cag/category.png" style="width: 24px; height: 24px; display: block; margin: 0 auto 5px;">
    <span style="font-size: 12px;">分类</span>
  </a>
  <a href="/cart/" style="text-align: center; color: #666; text-decoration: none;">
    <img src="/static/cag/cart.png" style="width: 24px; height: 24px; display: block; margin: 0 auto 5px;">
    <span style="font-size: 12px;">购物车</span>
  </a>
  <a href="/user/center/" style="text-align: center; color: #f40; text-decoration: none;">
    <img src="/static/cag/user-active.png" style="width: 24px; height: 24px; display: block; margin: 0 auto 5px;">
    <span style="font-size: 12px;">我的</span>
  </a>
</div>
{% endblock %}